<template>
    <div class="content">
        <div class="chart_item" v-for="item in lists" :key="item.id" :style="`width:${chartstyle[0]}; height:${chartstyle[1]};`">
            <div class="left">
                <el-checkbox-group v-model="item.checked" @change="handleCheckedChange(item)">
                    <el-checkbox v-for="it in item.tags" :label="it" :key="it.id">{{ it.name }}</el-checkbox>
                </el-checkbox-group>
                <el-button class="btn" type="primary" size="small" @click="clearC(item.id)">清除</el-button>
            </div>
            <div class="right" v-loading="item.loading">
                <hightCharts :ref="item.id" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
import hightCharts from './hightCharts'
import { deepClone } from '@/plugins/clone'
import { chartOptions, lineStyle } from '../config'
import { requestApi } from '@/requset/api'
import { dilution } from './config'

export default {
    data() {
        return {
            checked: [],
            tags: null,
            defaultKey: "vel",
            max: 3,
            lists: [],
            datetime: [new Date().getTime() - 3600 * 1000 * 24 * 15, new Date().getTime()],
        }
    },
    props: {

    },
    components: {
        hightCharts
    },
    computed: {
        ...mapState('backstage', ['sys_eig']),
        chartstyle() {
            let len = this.lists.length
            if (len <= 3 && len > 0)
                return ['100%', `${100 / len}%`]
            else if (len > 3)
                return ['50%', `${100 / Math.ceil(len / 2)}%`]
        }
    },
    methods: {
        clearC(id) {
            this.lists = this.lists.filter(item => item.id !== id);
        },
        addSensor(sensorInfo) {
            if (this.lists.length < 3) {
                if (sensorInfo.sys_eig) {
                    const arr1 = sensorInfo.sys_eig.split(",").map(Number);
                    this.lists.push(
                        {
                            tags: this.sys_eig.filter(item => arr1.includes(item.id)),
                            sensorInfo,
                            checked: [],
                            eigArr: [],
                            preEigArr: [],
                            id: nanoid()
                        }
                    )


                }
            } else this.$message.info("选择测点过多")
        },
        getChannel(address) {
            const parts = address.split('_')
            const firstNumber = parts[0]
            const secondNumber = parts[1] ? parts[1] : 0
            return [firstNumber.toString(), secondNumber.toString()]
        },
        drawChart(item) {
            let { checked, sensorInfo, id } = item
            let { address, port, proj_no, single, sensor_name } = sensorInfo
            let arr1 = this.getChannel(address)
            let eigkey = []
            checked.forEach(e => {
                let { nickname, vibration, unit, name } = e
                if (vibration == 1) {
                    eigkey.push({
                        key: nickname,
                        name: name + unit,
                        data: []
                    })
                } else {
                    if (single == 1) {
                        eigkey.push({
                            key: `Z.${nickname}`,
                            data: [],
                            name: name + unit,
                        })
                    }
                    else {
                        eigkey.push({
                            key: `Z.${nickname}`,
                            data: [],
                            name: '垂直' + name + unit,
                        })
                        eigkey.push({
                            key: `X.${nickname}`,
                            data: [],
                            name: '轴向' + name + unit,
                        })
                        eigkey.push({
                            key: `Y.${nickname}`,
                            data: [],
                            name: '水平' + name + unit,
                        })

                    }
                }
            })
            let obj = {
                saddr: arr1[0],
                channel: arr1[1],
                sport: port,
                single,
                proj_no,
                stime: this.dayjs(this.datetime[0]).unix(),
                etime: this.dayjs(this.datetime[1]).unix(),
                eigkey: eigkey.map(e => e.key)
            }
            requestApi('post', 'diag/eiges', obj, true).then(res => {
                let options = deepClone(chartOptions('datetime'))
                if (res.data.code == 0) {
                    let list = dilution(res.data.data)
                    if (list.length > 0)
                        list.forEach((e) => {
                            let id = e.id
                            var timestamp = Number(id) * 1000
                            checked.forEach(key => {
                                let { vibration, unit, name, nickname } = key

                                if (vibration == 1) {
                                    eigkey.forEach(ei => {

                                        if (ei.key.includes(nickname)) {
                                            ei.data.push([timestamp, e[nickname] !== undefined ? e[nickname] : null])
                                        }
                                    })
                                } else {
                                    if (single == 1)
                                        eigkey.forEach(ei => {
                                            if (ei.key.includes(nickname)) {
                                                ei.data.push([timestamp, e['Z'][nickname] !== undefined ? e['Z'][nickname] : null])
                                            }
                                        })
                                    else {
                                        eigkey.forEach(ei => {
                                            if (ei.key.includes(nickname)) {
                                                ei.data.push([timestamp, e['Z'][nickname] !== undefined ? e['Z'][nickname] : null])
                                                ei.data.push([timestamp, e['X'][nickname] !== undefined ? e['X'][nickname] : null])
                                                ei.data.push([timestamp, e['Y'][nickname] !== undefined ? e['Y'][nickname] : null])
                                            }
                                        })
                                    }
                                }
                            })
                        })
                }
                let colors = [
                    "#33FFCC", // 青色
                    "#FF5733", // 橙色
                    "#33FF57", // 绿色
                    "#3366FF", // 蓝色
                    "#FF33EE", // 紫色
                    "#33FFFF", // 青色
                    "#FF3366", // 红色
                    "#FFFF33", // 黄色
                    "#3399FF", // 蓝色
                    "#33FF99", // 绿色
                    "#9933FF", // 紫色
                    "#FF9933", // 橙色
                ];
                eigkey.forEach((e, i) => {
                    options.series.push(
                        Object.assign(
                            {
                                data: e.data,
                            },
                            lineStyle( e.name),
                        ),
                    )
                })
                options.legend.enabled = true
                options.title.text = `${sensor_name} `
                this.$nextTick(() => {
                    this.$refs[id][0].updateChart(options)
                })
            })
        },
        handleCheckedChange(e) {
            this.drawChart(e)
        },
        clearSensors() {
            this.$set(this, 'lists', [])
        },
        setTime(e) {

            this.datetime = e
            this.lists.forEach(e => this.drawChart(e))
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;

    .chart_item {
        float: left;
        border-bottom: 1px solid #409EFF;

        .left {
            width: 210px;
            height: 100%;
            float: left;
            position: relative;
            border-right: 1px solid #409EFF;

            .btn {
                position: absolute;
                right: 10px;
                top: 5px;
            }

            .el-checkbox-group {

                margin-left: 10%;
                width: 80%;
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 10px;
                left: 0;
            }
        }

        .right {
            width: calc(100% - 280px);
            float: left;
            height: 100%;
        }
    }

}
</style>
